<template>
  <div class="detail">
    <scroll class="content">
      <!-- 商品详情页中的swiper部分 -->
    <detail-header></detail-header>

    <!-- 商品详情页中的商品名字及价格部分 -->
    <detail-desc :goods="goods"></detail-desc>

    <!-- 商品详情页中的用户评价部分 -->
    <detail-assess></detail-assess>

    <!-- 商品详情页中的商品详情和商品参数 -->
    <detail-show></detail-show>
    </scroll>
    
    <!-- 商品详情页中的底部部分 -->
    <detail-tab @addCart ="addToCart"></detail-tab>
  </div>
</template>

<script>
import DetailHeader from './components/header'
import DetailDesc from './components/desc'
import DetailAssess from './components/assess'
import DetailShow from './components/show'
import DetailTab from './components/tabBar'
import Scroll from 'components/common/scroll/Scroll'

import {getDetail,Goods} from 'network/detail'
import {mapActions} from 'vuex'

export default {
  name: 'Detail',
  components: {
    DetailHeader,
    DetailDesc,
    DetailAssess,
    DetailShow,
    DetailTab,
    Scroll
  },
  data () {
    return {
      id: 'null',
      //接口中所有的图片
      topImages:[],
      //接口中如果数据比较散，就把它封装成一个对象，然后暴露出来
      goods:{},
      message: '',
      show: false
    }
  },
  methods: {
    ...mapActions(['addCart']),

    /* 添加到购物车 */
    addToCart () {
      //1.获取购物车需要展示的信息
      const product = {}
      product.img = this.topImages,
      product.goods_name = this.goods.goods_name
      product.price = this.goods.price
      product.id = this.id
      // console.log("----")

      //2.将商品添加到购物车
      this.addCart(product).then(res => {
         this.$toast.show(res,1500)
        // console.log(this.$toast)
       
      })

    }
  },
  created () {
    //1.保存存入的id
    this.id = this.$route.params.id
    //2.根据id请求详情数据
    getDetail(this.id).then((res) => {
      // console.log(res);
      const data = res.result
      //1.获取接口中的图片
      this.topImages = data.img
      //2.获取接口中的商品信息
      this.goods = new Goods(data)
    })
  }
}
</script>

<style lang="less" scoped>
.detail {
  background: #eee;
  position: relative;
  z-index: 9;
  height: 100vh;
  .content {
    height: calc(100% - .49rem);
  }
}
</style>
